<template>
  <div class="main">
    <ul>
      <li v-for="(item, index) in body" :key="index">
        <div v-show="item.tag">{{ item.text }}</div>
        <div>{{ getindex }}</div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      body: [
        { text: "管理中心", tag: true },
        { text: "商品管理", tag: false },
        { text: "会员管理", tag: false },
        { text: "订单管理", tag: false },
      ],
    };
  },
  methods: {
    //   fn(index){
    //       console.log(this.body[index].tag);
    //   }
  },
  props: {
    index: {
      type: Number,
      default: "",
    },
  },
  computed: {
    getindex() {
      this.body.forEach((item) => {
        item.tag = false;
      });
      this.body[this.index].tag = true;
      console.log(this.index);
    },
    
  },
  mounted() {
    //  console.log(this.index);
    // this.body.forEach((item) => {
    //   item.tag = false;
    // });
    // this.body[this.index].tag = true;
    // console.log(this.index);
  },
};
</script>

<style>
.main {
  background-color: #dbdcdc;
  height: 80vh;
}
.main ul {
  list-style: none;
  position: relative;
}
.main li div {
  width: 80vw;
  height: 80vh;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  position: absolute;
}
</style>